<style type="text/css">
.overflow-h {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.overflow-h1 {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.category {
        display: block !important;
}
.fui-swipe {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.fui-swipe-wrapper {
	box-sizing: content-box;
	display: flex;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition-property: transform;
	width: 100%;
	z-index: 1;
}
.fui-swipe-item {
	-webkit-flex-shrink: 0;
	-ms-flex: 0 0 auto;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
}
.fui-swipe-item,
.fui-swipe-wrapper {
	-webkit-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
}
.fui-swipe-wrapper .fui-swipe-item img {
	width:100%;
	display: block;
}
.fui-swipe-page {
	position: absolute;
	text-align: center;
	-webkit-transition: 300ms;
	transition: 300ms;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	z-index: 14;
	bottom:10px;
	width:100%;
}
.fui-swipe-bullet {
	background: #fff none repeat scroll 0 0;
	border-radius: 100%;
	display: inline-block;
	height: 8px;
	opacity: 0.5;
	width: 8px;
	margin:0 1px;
}
.fui-swipe-bullet.active {
	background: #ff5555 none repeat scroll 0 0;
	opacity: 1;
}
.fui-swipe-button {
	position: absolute;
	top:50%;
	z-index:10;
	background:rgba(0,0,0,.2);
	text-align: center;
	width:2rem;
	height:2rem;
	border-radius: .2rem;
	-webkit-transition: 300ms;
	transition: 300ms;
	margin-top:-1rem;
}
.fui-swipe-button:active{
	background:rgba(0,0,0,.5);
}
.fui-swipe-button.left {
	left:-10px;
}
.fui-swipe-button.right {
	right:-10px;
}
.fui-swipe-button.left:after,
.fui-swipe-button.right:after {
	content: " ";
	display: inline-block;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	height: .6rem;
	width: .6rem;
	border-color: #fff;
	border-style: solid;
	position: relative;
	top: .4rem;
	opacity: 0.5;
}
.fui-swipe-button.left:after {
	margin-left:.8rem;
	border-width: 0 0 2px 2px;
}
.fui-swipe-button.right:after {
	margin-right:.6rem;
	border-width: 2px 2px 0 0;
}
.fui-swipe-button:active:after{
	opacity: 0.8;
}
.fui-swipe-page .fui-swipe-bullet {background: #fff;border-radius: 100%;}
.fui-swipe-page .fui-swipe-bullet.active {opacity: 1;width:1rem;border-radius: 10px;}
.carousel {
	position:relative
}
.carousel-inner {
	position:relative;
	width:100%;
	overflow:hidden
}
.carousel-inner>.item {
	position:relative;
	display:none;
	-webkit-transition:.6s ease-in-out left;
	-o-transition:.6s ease-in-out left;
	transition:.6s ease-in-out left
}
.carousel-inner>.item>a>img,.carousel-inner>.item>img {
	line-height:1
}
@media all and (transform-3d),(-webkit-transform-3d) {
	.carousel-inner>.item {
	-webkit-transition:-webkit-transform .6s ease-in-out;
	-o-transition:-o-transform .6s ease-in-out;
	transition:transform .6s ease-in-out;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-perspective:1000px;
	perspective:1000px
}
.carousel-inner>.item.active.right,.carousel-inner>.item.next {
	left:0;
	-webkit-transform:translate3d(100%,0,0);
	transform:translate3d(100%,0,0)
}
.carousel-inner>.item.active.left,.carousel-inner>.item.prev {
	left:0;
	-webkit-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0)
}
.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right {
	left:0;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0)
}
}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev {
	display:block
}
.carousel-inner>.active {
	left:0
}
.carousel-inner>.next,.carousel-inner>.prev {
	position:absolute;
	top:0;
	width:100%
}
.carousel-inner>.next {
	left:100%
}
.carousel-inner>.prev {
	left:-100%
}
.carousel-inner>.next.left,.carousel-inner>.prev.right {
	left:0
}
.carousel-inner>.active.left {
	left:-100%
}
.carousel-inner>.active.right {
	left:100%
}
.carousel-control {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:15%;
	font-size:20px;
	color:#fff;
	text-align:center;
	text-shadow:0 1px 2px rgba(0,0,0,.6);
	background-color:rgba(0,0,0,0);
	filter:alpha(opacity=50);
	opacity:.5
}
.carousel-control.left {
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
	background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=1);
	background-repeat:repeat-x
}
.carousel-control.right {
	right:0;
	left:auto;
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
	background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=1);
	background-repeat:repeat-x
}
.carousel-control:focus,.carousel-control:hover {
	color:#fff;
	text-decoration:none;
	filter:alpha(opacity=90);
	outline:0;
	opacity:.9
}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev {
	position:absolute;
	top:50%;
	z-index:5;
	display:inline-block;
	margin-top:-10px
}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev {
	left:50%;
	margin-left:-10px
}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next {
	right:50%;
	margin-right:-10px
}
.carousel-control .icon-next,.carousel-control .icon-prev {
	width:20px;
	height:20px;
	font-family:serif;
	line-height:1
}
.carousel-control .icon-prev:before {
	content:'\2039'
}
.carousel-control .icon-next:before {
	content:'\203a'
}
.carousel-indicators {
	position:absolute;
	bottom:10px;
	left:50%;
	z-index:15;
	width:60%;
	padding-left:0;
	margin-left:-30%;
	text-align:center;
	list-style:none
}
.carousel-indicators li {
	display:inline-block;
	width:10px;
	height:10px;
	margin:1px;
	text-indent:-999px;
	cursor:pointer;
	background-color:#000\9;
	background-color:rgba(0,0,0,0);
	border:1px solid #fff;
	border-radius:10px
}
.carousel-indicators .active {
	margin:0;
	background-color:#fff
}
.carousel-caption {
	position:absolute;
	right:15%;
	bottom:20px;
	left:15%;
	z-index:10;
	padding-top:20px;
	padding-bottom:20px;
	color:#fff;
	text-align:center;
	text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.carousel-caption .btn {
	text-shadow:none
}
@media screen and (min-width:768px) {
	.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev {
	width:30px;
	height:30px;
	margin-top:-10px;
	font-size:30px
}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev {
	margin-left:-10px
}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next {
	margin-right:-10px
}
.carousel-caption {
	right:20%;
	left:20%;
	padding-bottom:30px
}
.carousel-indicators {
	bottom:20px
}
}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before {
	display:table;
	content:" "
}
.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after {
	clear:both
}
.center-block {
	display:block;
	margin-right:auto;
	margin-left:auto
}
.home-sale-layout .right-sidebar .ntrance li i { position:absolute; left:23px; top:13px; background:url(../addons/jy_weishop_en/resource/pc/images/ico_ntrance-en.png) no-repeat; display: block; height: 25px; margin: 0 auto; width: 25px; }
.home-focus-layout {
    height: 520px;
}
.home-standard-layout .goods-list ul li {
    width: 209px;
    height: 320px;
}
.style-orange .left-sidebar .title {
    background-color: red;
}
.style-orange .tabs-nav {
    border-color: transparent transparent red transparent;
}
/*中部推荐商品列表*/
.home-standard-layout .goods-list {float:right; width:100%;background:none }
.home-standard-layout .goods-list ul { width: 100%; height: auto; margin: 0 -1px -1px 0;}
.home-standard-layout .goods-list ul li { width: 25%; height: 400px; float: left; overflow: hidden; }
.home-standard-layout .goods-list dl { width: 100%; margin: 14px auto auto; position: relative; z-index: 1; }
.home-standard-layout .goods-list dl dt.goods-name {font-size: 16px;padding:20px 5px 10px 5px;top:0;font-family: Tahoma; text-overflow: ellipsis; white-space: nowrap; line-height: 22px;height: 22px; width: 100%; position: relative; z-index: auto; overflow: hidden; }
.home-standard-layout .goods-list dl dd.goods-thumb {position: relative; width: 100%; height: 300px;background:#f2f2f2; overflow:hidden; z-index: auto; top: 0; left: 0; }
.home-standard-layout .goods-list dl dd.goods-thumb a { text-align: center; vertical-align: middle;display: block;width: 100%; height: 100%; overflow: hidden; }
.home-standard-layout .goods-list dl dd.goods-thumb img { width: 100%; height:300px;}
.home-standard-layout .goods-list dl dd.goods-price { font-size: 16px;padding:5px; line-height: 20px; position: relative; z-index: auto; top: 0; left: 0; }
.home-standard-layout .goods-list dl dd.goods-price .original { font-size: 12px; font-weight: normal; text-decoration: line-through; color: #999; vertical-align: middle; margin-left: 6px; }
</style>
<div ng-include="sys_html('layout/_header')"></div>
<!-- HomeFocusLayout Begin-->
<div class="home-focus-layout fui-page" style="width:100%;margin:0 auto;height:520px">
	<div id="carousel-container" class="carousel slide" data-role="carousel" data-param-auto="true">
			<div class="carousel-inner" role="listbox">
				<div ng-repeat="item in pagedata.pc_set.hdps" ng-class="{'item':true,'active':$index==0}">
					<a href="{{item.url}}">
						<img ng-src="{{tomedia(item.picurl)}}" style="display: block; width: 100%; height: 520px;"/>
					</a>
				</div>
			</div>
			<div id="carousel-jinyun" class="fui-swipe-page" style="bottom: 10px; ">
				<div class="fui-swipe-bullet" ng-repeat="item in pagedata.pc_set.hdps" data-target="#carousel-container" data-slide-to="{{$index}}" ng-class="{'active':$index==0}"></div>
			</div>
	</div>
</div>
<div class="wrapper">
    <div class="mt10">
        <div class="mt10">
           {{pagedata.extradata.middle_adv}}
        </div>
    </div>
</div>
    <div ng-repeat="item in pagedata.p_group" class="home-standard-layout wrapper" style="margin-bottom:20px;" ng-if="item.goodslist.length>0">
        <div style="width:100%;">
			<div style="text-align:center;font-size:22px;padding:20px">
               {{item.title}}
            </div>
            <div class="goods-list" style="width:100%;">
                <ul style="width:100%;">
                        <li ng-repeat="g in item.goodslist">
							 <div style="padding:10px">
                            <dl>
                                <dd class="goods-thumb">
                                    <a href="javascript:;" ng-click="access_json('jy_weishop_en/goods.detail//id='+g.id)">
                                        <img src="{{g.image}}" alt="{{g.title}}" ng-src="{{tomedia(g.image)}}" rel="lazy" style="display: inline;">
                                    </a>
                                </dd>
								<dt class="goods-name">
                                    <a  href="javascript:;" ng-click="access_json('jy_weishop_en/goods.detail//id='+g.id)" title="{{g.title}}" >{{g.title}}</a>
								</dt>
                                <dd class="goods-price">${{g.price}}</dd>
                            </dl>
							 </div>
                        </li>
                </ul>
            </div>
        </div>
    </div>
<!--StandardLayout End-->
<div class="wrapper mt10">
     {{pagedata.extradata.bottom_adv}}
</div>
<div ng-include="sys_html('layout/_footer')"></div>
<script>
	require(['bootstrap', 'hammer'], function($, Hammer){
		$('#carousel-container').carousel();
		var mc = new Hammer($('#carousel-container').get(0));
		mc.on("panleft", function(ev) {
			$('#carousel-container').carousel('next');
		});
		mc.on("panright", function(ev) {
			$('#carousel-container').carousel('prev');
		});
	});
</script>